import { createStore } from 'ee-vuex'
import { lang, languages } from './i18n'

/** 屏幕长宽比
 * @typedef {'h' | 's' | 'v'} AspectRatio
 * 
 * - h: 横屏，w / h >= 1
 * - s: 方屏，w / h >= 1，ipad mini | surface duo 等设备为 0.75
 * - v: 竖屏，w / h < 1
 * 
 * 可以通过修改 aspectRatioValue 的比例值来改变长宽比例
 * 
 * @example
 * ```
 * import { aspectRatioValue } from 'ee-ui'
 * // 都改为 1 则忽略方屏，只考虑横屏和竖屏
 * aspectRatioValue.h = 1
 * aspectRatioValue.s = 1
 * ```
 */

export const aspectRatioValue = {
  /** 长宽比大于这个数则视为横屏 */
  h: 1,
  /** 长宽比大于这个数则视为方屏 */
  s: 1,
}

export default createStore({
  /** 窗口的宽度 */
  width: 0,
  /** 窗口的高度 */
  height: 0,
  /** 屏幕长宽比
   * @type {AspectRatio}
   */
  ar() {
    const r = this.width / this.height;
    if (r >= aspectRatioValue.h)
      return 'h'
    else if (r >= aspectRatioValue.s)
      return 's'
    else
      return 'v'
  },
  /** 横屏(窗口宽比高大)
   * @see v - 更多注释参考v
   */
  h() { return this.ar == 'h'; },
  /** 方屏(窗口宽比高大)
   * @see v - 更多注释参考v
   */
  s() { return this.ar == 's'; },
  /** 竖屏(窗口高比宽大)
   * @example
   * 1. 变量模板适配
   * <element v-if="eeui.h" /> <!--只有横屏可见-->
   *
   * 2. class模板适配
   * <element class="h" /> <!--只有横屏可见-->
   * <element class="v" /> <!--只有竖屏可见-->
   *
   * 3. css样式适配，建议默认为横屏样式，仅通过body[h]配置竖屏样式即可
   * body[h] { 竖屏样式 }
   * body:not([h]) { 横屏样式 }
   */
  v() { return this.ar == 'v'; },
  /** 是否是手机(平板)设备
   * @type {boolean}
   * 
   * @example
   * 1. 变量模板适配
   * <element v-if="eeui.mb" /> <!-- 只有手机可见 -->
   * 
   * 2. class模板适配
   * <element class="pc" /> <!-- 只有PC可见 -->
   * <element class="mb" /> <!-- 只有手机可见 -->
   * 
   * 3. css样式适配，建议默认为PC样式，仅通过body[mb]配置手机样式即可
   * body[mb] { 手机版样式 }
   * body:not([mb]) { PC版样式 }
   */
  mb(value) {
    if (value) {
      document.body.setAttribute('mb', '');
      document.body.removeAttribute('pc');
    } else {
      document.body.setAttribute('pc', '');
      document.body.removeAttribute('mb');
    }
  },
  /** 为 ui 框架设置语言，默认 cn
   * 
   * 可以通过 i18n.key 或 i18n[key] 获取语言文字
   */
  i18n: {
    /** @type {lang} */
    default: 'cn',
    p: true,
    get(value) {
      return languages[value];
    }
  },
}, "eeui");